<template>
	<div class="warninglist">
		<el-tabs class="warning-con" type="border-card">
			<el-tab-pane label="今日告警">
				<div class="search-container">
					<el-form :inline="true" size="small">
						<el-form-item label="告警类型">
							<el-select
								v-model="todayAlarmType"
								@change="todayTypeChange"
								multiple
								placeholder="请选择"
							>
								<el-option
									v-for="item in alarmTypeList"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="时间段">
							<el-time-picker
								v-model="todayParams.startDate"
								:picker-options="{
									selectableRange: '00:00:00 - 23:59:59',
								}"
								format="HH:mm:ss "
								value-format="HH:mm:ss"
								placeholder="开始时间"
							>
							</el-time-picker>
							<el-time-picker
								style="margin-left: 10px"
								v-model="todayParams.endDate"
								:picker-options="{
									selectableRange: '00:00:00 - 23:59:59',
								}"
								format="HH:mm:ss "
								value-format="HH:mm:ss"
								placeholder="结束时间"
							>
							</el-time-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="getTodayWaring">查询</el-button>
							<el-button @click="cancelToday" type="normass">取消</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="table-container">
					<el-table :data="todayWaringList" style="width: 100%">
						<el-table-column type="index" label="序号" width="180">
						</el-table-column>
						<el-table-column prop="name" label="站点"> </el-table-column>
						<el-table-column prop="alarmstring" label="告警详细信息">
						</el-table-column>
						<el-table-column prop="dttimestamp" label="时间"> </el-table-column>
					</el-table>
				</div>
				<div class="table-pagination">
					<el-pagination
						background
						@current-change="handleCurrentChangeToday"
						:current-page="todayParams.pageNum"
						:page-size="todayParams.pageSize"
						layout="total, prev, pager, next"
						:total="todayTotal"
					>
					</el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane label="历史告警">
				<div class="search-container">
					<el-form :inline="true" size="small">
						<el-form-item label="告警类型">
							<el-select
								v-model="historyAlarmType"
								@change="historyTypeChange"
								multiple
								placeholder="请选择"
							>
								<el-option
									v-for="item in alarmTypeList"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="时间段">
							<el-date-picker
								v-model="historyParams.startDate"
								type="datetime"
								format="yyyy-MM-dd HH:mm:ss"
								value-format="yyyy-MM-dd HH:mm:ss"
								placeholder="开始日期"
							>
							</el-date-picker>
							<el-date-picker
								style="margin-left: 10px"
								v-model="historyParams.endDate"
								type="datetime"
								format="yyyy-MM-dd HH:mm:ss"
								value-format="yyyy-MM-dd HH:mm:ss"
								placeholder="结束日期"
							>
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="getHistoryWaring"
								>查询</el-button
							>
							<el-button @click="cancel" type="normass">取消</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="table-container">
					<el-table :data="historyWaringList" style="width: 100%">
						<el-table-column type="index" label="序号" width="180">
						</el-table-column>
						<el-table-column prop="name" label="站点名称"></el-table-column>
						<el-table-column prop="alarmstring" label="告警详细信息">
						</el-table-column>
						<el-table-column prop="dttimestamp" label="时间"> </el-table-column>
					</el-table>
				</div>
				<div class="table-pagination">
					<el-pagination
						background
						@current-change="handleCurrentChangeHistory"
						:current-page="historyParams.pageNum"
						:page-size="historyParams.pageSize"
						layout="total, prev, pager, next"
						:total="historyTotal"
					>
					</el-pagination>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import {
	todayWaring,
	historyWaring,
	getAlarmTypeInfo,
} from "@/api/modules/waring";
export default {
	props: {},
	data() {
		return {
			alarmTypeList: [],
			todayParams: {
				pageNum: 1,
				pageSize: 15,
				devId: this.$route.query.id
					? this.$route.query.id
					: "56857945295552513",
				type: this.$route.query.alarmType ? this.$route.query.alarmType : 602,
				alarmType: "",
				startDate: "00:00:00",
				endDate: "23:59:59",
			},
			todayAlarmType: [],
			oldTodayAlarmType: [],
			todayTotal: 0,
			todayWaringList: [],
			historyParams: {
				pageNum: 1,
				pageSize: 15,
				devId: this.$route.query.id
					? this.$route.query.id
					: "56857945295552513",
				type: this.$route.query.alarmType ? this.$route.query.alarmType : 602,
				startDate: null,
				endDate: null,
				alarmType: "",
			},
			historyAlarmType: [],
			oldHistoryAlarmType: [],
			historyTotal: 0,
			historyWaringList: [],
		};
	},
	mounted() {
		this.getAlarmTypeList();
	},

	methods: {
		getAlarmTypeList() {
			getAlarmTypeInfo().then((res) => {
				for (let key in res.data) {
					this.alarmTypeList.push({
						id: key,
						name: res.data[key],
					});
				}
				this.todayAlarmType.push(this.alarmTypeList[0].id);
				this.oldTodayAlarmType.push(this.alarmTypeList[0].id);
				this.historyAlarmType.push(this.alarmTypeList[0].id);
				this.oldHistoryAlarmType.push(this.alarmTypeList[0].id);
				this.getTodayWaring();
			});
		},
		handleCurrentChangeToday(val) {
			this.todayParams.pageNum = val;
			this.getTodayWaring();
		},
		getTodayWaring() {
			this.todayParams.alarmType = this.todayAlarmType.join(",");
			todayWaring(this.todayParams).then((res) => {
				this.todayWaringList = res.data.records;
				this.todayWaringList.forEach((item) => {
					item.name = this.$route.query.name;
				});
				this.todayTotal = res.data.total;
			});
		},
		cancelToday() {
			this.todayParams = {
				pageNum: 1,
				pageSize: 15,
				devId: this.$route.query.id
					? this.$route.query.id
					: "56857945295552513",
				type: this.$route.query.alarmType ? this.$route.query.alarmType : 602,
				alarmType: "",
				startDate: "00:00:00",
				endDate: "23:59:59",
			};
			this.todayAlarmType = [this.alarmTypeList[0].id];
			this.getTodayWaring();
		},
		handleCurrentChangeHistory(val) {
			this.historyParams.pageNum = val;
			this.getHistoryWaring();
		},
		todayTypeChange(e) {
			let isAllId = e.includes("1");
			let isOldAllId = this.oldTodayAlarmType.includes("1");
			if (!isOldAllId && isAllId) {
				this.todayAlarmType = ["1"];
			} else if (e.length > 1 && isAllId) {
				this.todayAlarmType = this.todayAlarmType.filter(
					(item) => item !== "1"
				);
			}
			this.oldTodayAlarmType = JSON.parse(JSON.stringify(this.todayAlarmType));
		},
		historyTypeChange(e) {
			let isAllId = e.includes("1");
			console.log(e);
			console.log(isAllId);

			let isOldAllId = this.oldHistoryAlarmType.includes("1");
			console.log(isOldAllId);
			console.log(this.oldHistoryAlarmType);
			if (!isOldAllId && isAllId) {
				this.historyAlarmType = ["1"];
			} else if (e.length > 1 && isAllId) {
				this.historyAlarmType = this.historyAlarmType.filter(
					(item) => item !== "1"
				);
			}
			this.oldHistoryAlarmType = JSON.parse(
				JSON.stringify(this.historyAlarmType)
			);
			console.log(this.oldHistoryAlarmType);
		},
		getHistoryWaring() {
			if (!this.historyAlarmType) {
				this.$Message({
					text: "请选择告警类型",
					type: "warning",
				});
				return;
			}
			if (!this.historyParams.startDate) {
				this.$Message({
					text: "请选择开始日期",
					type: "warning",
				});
				return;
			}
			if (!this.historyParams.endDate) {
				this.$Message({
					text: "请选择结束日期",
					type: "warning",
				});
				return;
			}
			this.historyParams.alarmType = this.historyAlarmType.join(",");
			historyWaring(this.historyParams).then((res) => {
				this.historyWaringList = res.data.records;
				this.historyWaringList.forEach((item) => {
					item.name = this.$route.query.name;
				});
				this.historyTotal = res.data.total;
			});
		},
		cancel() {
			this.historyParams = {
				pageNum: 1,
				pageSize: 15,
				devId: this.$route.query.id,
				type: this.$route.query.alarmType,
				date: null,
				alarmType: "",
			};
			this.historyAlarmType = [];
			this.historyTotal = 0;
			this.historyWaringList = [];
		},
	},
};
</script>
<style lang="scss">
.warninglist {
	/* height: 100%; */
	width: 100%;

	.warning-top {
		display: flex;
		justify-content: space-around;
		position: relative;
		gap: 40px 20px;

		.warning-item {
			height: 360px;
			border: 1px solid #2b476a;
		}

		.warning-item2 {
			flex: 1;

			.echats-con {
				width: 100%;
				height: calc(100% - 52px);
			}
		}

		.warning-item1 {
			.warning-con1 {
				width: 300px;
				height: calc(100% - 52px);
				flex-wrap: wrap;
				position: relative;
				align-items: center;
				text-align: center;

				.warning-con1-con {
					width: 135px;
					height: 139px;
					background: rgb(5, 21, 60);
					border-radius: 4px 4px 4px 4px;
					display: flex;
					align-items: center;
					text-align: center;
					justify-content: space-around;
					color: #fff;
					margin-left: 10px;

					.num {
						font-size: 18px;
						line-height: 25px;
					}

					.con {
						font-size: 14px;
						line-height: 25px;
					}

					&:last-child {
						border: none;
					}
				}
			}
		}
	}

	.warning-con {
		border: 1px solid #2b476a;
		margin: 10px 0;
		background: none;

		.el-tabs__header {
			background-color: initial;

			.el-tabs__item {
				border: none;
			}

			.el-tabs__item.is-active {
				background: none;
				border: none;
				border-bottom: 2px solid #02faff;
			}
		}
	}
}
</style>
